<template>
  <div>
    <div v-if="!isLogin" class="loginDom">
      <loginForm></loginForm>
    </div>
    <div v-if="contentshow" class="notMemberDom">
      <p class="member">
        尊敬的用户，您的会员可能已过期或者未开通该频道的权限，请拨打服务热线
        <a :href="'tel:'+phoneNum">{{phoneNum}}</a>
        寻求帮助
      </p>
    </div>
    <notMember></notMember>
    <div style="padding-bottom:1rem" v-if="channelNemu.length>0">
      <van-tabs @click="onClick" v-model="activeName">
        <van-tab v-for="(i,index) in channelNemu" :key="index" :name="index" :title="i.menuname"></van-tab>
      </van-tabs>
      <p class="sj-title">{{l1name}}</p>
      <div class="maxbox">
        <div class="maxbox-li" v-for="(i,index) in bannerList" :key="index">
          <div class="maxbox-li-dom">
            <p class="name">{{i.title}}</p>
            <p class="dw">{{i.unit}}</p>
            <p class="nums">{{i.nums}}</p>
            <p class="time">{{i.date}}</p>
          </div>
        </div>
      </div>

      <div class="echart-dom">
        <dom2-img @setsy="showsy" syImg="syImg" imageTofile="imageTofile"></dom2-img>
        <div class="showdom" id="imageTofile">
          <p class="sj-title">{{l2name}}</p>
          <div :class="{sydomshow:sy}" class="sydom">
            <img id="syImg" src="../../assets/img/sy.png" alt />
          </div>
          <div class="date-dom">
            <p class="data-title">
            起始：
              <span class="back-icon" @click="showSet(0)">
                <van-icon name="arrow-left" />
              </span>
              <span class="timeset" @click="showSet(0)">{{params.bgdate}}</span>
              <span class="timeset" @click="showSet(1)">{{params.endate}}</span>
              <span class="back-icon" @click="showSet(1)">
                <van-icon name="arrow" />
              </span>
            </p>
            <div class="legend">
              <span v-if="echart.y1name">{{echart.y1name}}</span>
              <span v-if="echart.y2name">{{echart.y2name}}</span>
            </div>
            <div v-if="echart.x">
              <sjEchart v-if="params.channel!=='dlg'" :echart="echart"></sjEchart>
              <sjEchartdlg v-else :echart="echart"></sjEchartdlg>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model="show" position="bottom">
        <van-datetime-picker
          @cancel="cancelpick"
          @confirm="confirmpick"
          v-model="currentDate"
          type="date"
        />
      </van-popup>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { getechart, getcapacitycats, getcapacitydata } from "../../api/datanum";
import sjEchart from "../../components/sjEchart";
import sjEchartdlg from "../../components/sjEchartdlg";
import {
  getNowFormatDate,
 
  getendFormatDate,
  formatDate
} from "../../assets/js/tools";
import notMember from "../../components/price/notMember";
import loginForm from "../../components/login/index";
import { checkusertokenid } from "../../api/user";
import Dom2Img from "../../components/dom2Img";
export default {
  components: {
    sjEchart,
    sjEchartdlg,
    notMember,
    loginForm,
    Dom2Img
  },
  data() {
    return {
      phoneNum: this.$store.state.nocaches.kefuphone,
      show: false,
      currentDate: new Date(),
      channelNemu: [],
      channelNemuActive: {},
      l1name: "",
      l2name: "",
      // activeName:"",//匹配memu的name
      bannerList: [],
      echart2: {},
      echart: {},
      isLogin: true,
      params: {
        channel: this.$route.query.channel,
        bgdate: "",
        endate: "",
        cid: ""
      },
      contentshow: false,
      content: "",
      sy: false,
      dateType: ""
    };
  },

  methods: {
    showsy(sy) {
      this.sy = sy;
    },
    //頁面初始化
    init() {
      checkusertokenid;
      let obj = {};
      obj.channel = this.$route.query.channel;
      checkusertokenid(obj).then(res => {
        if (res.code == "0000") {
          this.isLogin = true;
          this.params.bgdate = getendFormatDate(180);
          this.params.endate = getNowFormatDate();
          this.gettabs();
        } else if (res.code == "1102") {
          this.isLogin = true;
          this.contentshow = true;
          this.$store.commit("munotMember", {
            notMember: true, //是否是该频道会员
            notMembershow: true
          });
        } else {
          this.isLogin = false;
        }
      });
    },
    //展示时间组件
    showSet(i) {
      this.show = true;
      this.dateType = i;
    },
    //关闭时间组件
    cancelpick() {
      this.show = false;
    },
    //确认时间组件
   confirmpick(val) {
      if (this.dateType == 1) {
        //设置结束时间
        if (val - new Date(this.params.bgdate) > 0) {
          this.params.endate = formatDate(val);
          this.getechart();
             this.show = false;
        } else {
          this.$toast("开始时间需小于结束时间");
        }
      } else {
        if (val - new Date(this.params.endate) >= 0) {
          this.$toast("开始时间需小于结束时间");
        } else {
          this.params.bgdate = formatDate(val);
          this.show = false;
          this.getechart();
        }
      }
    },
    onClick(name, title) {
      this.channelNemuActive = this.channelNemu[name];
      this.l1name = this.channelNemuActive.l1name;
      this.l2name = this.channelNemuActive.l2name;
      this.params.cid = this.channelNemuActive.linkcatid;
      this.getullist();
      this.getechart();
    },

    gettabs() {
      getcapacitycats(this.params).then(res => {
        if (res.code == "0000") {
          this.channelNemu = res.data;
          for (let i = 0; i < this.channelNemu.length; i++) {
            const ele = this.channelNemu[i];
            let qName = this.$route.query.menuname || this.$route.query.kw;
            let eleName = ele.menuname;
            if (eleName == qName || eleName.indexOf(qName) > -1) {
              this.channelNemuActive = ele;
              this.activeName = i;
              this.l1name = this.channelNemu[i].l1name;
              this.l2name = this.channelNemu[i].l2name;
              break;
            } else {
              this.channelNemuActive = this.channelNemu[0];
              this.l1name = this.channelNemu[0].l1name;
              this.l2name = this.channelNemu[0].l2name;
              this.activeName = 0;
            }
          }
          this.params.cid = this.channelNemuActive.linkcatid;
          this.getullist();
          this.getechart();
        }
      });
    },

    getullist() {
      getcapacitydata(this.params).then(res => {
        if (res.code == "0000") {
          this.bannerList = res.data[0];
        }
      });
    },

    getechart() {
      getechart(this.params).then(res => {
        if (res.code == "0000") {
          this.echart = res.data;
          this.echart.y1name = res.data["y1-name"];
          this.echart.y2name = res.data["y2-name"];
        }
      });
    }
  },
  created() {
    this.init();
  }
};
</script>

<style scoped lang="less">
.sj-title {
  background-color: #fff;
  font-size: 0.3rem;
  text-align: center;
  font-weight: bolder;
  color: rgba(21, 23, 35, 1);
  line-height: 1.1rem;
}
.loginDom {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
}
.echart-dom {
  position: relative;
  .showdom {
    background: #fff;
    padding: 0.3rem;
    position: relative;
    .sydom {
      position: absolute;
      bottom: 2.4rem;
      left: 50%;
      margin-left: -1rem;
      z-index: 11;
      width: 2rem;
      opacity: 1;
      &.sydomshow {
        opacity:1;
      }
    }
  }

  .sj-title {
    border-bottom: 0.01rem solid rgba(229, 229, 229, 1);
  }
}
.maxbox {
  position: relative;
  display: flex;
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
  overflow-x: auto;
  user-select: none;
  overflow-x: auto;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  padding-bottom: 0.3rem;
  margin-bottom: 0.3rem;
  .maxbox-li {
    flex: 0 0 30%;
  }
  .maxbox-li-dom {
    width: 2rem;
    height: 2rem;
    background: rgba(247, 247, 247, 1);
    border-radius: 0.08rem;
    margin-right: 0.15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
      text-align: center;
    }
  }
  .name {
    font-size: 0.24rem;
    color: rgba(39, 41, 55, 1);
    line-height: 0.32rem;
    margin-bottom: 0.08rem;
  }
  .dw {
    font-size: 0.2rem;
    color: rgba(136, 137, 141, 1);
    line-height: 0.24rem;
  }
  .nums {
    font-size: 0.4rem;
    font-weight: bold;
    color: rgba(39, 41, 55, 1);
    margin: 0.2rem;
  }
  .time {
    font-size: 0.2rem;
    color: rgba(136, 137, 141, 1);
  }
}
.data-title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem;
  .back-icon {
    width: 0.6rem;
    height: 0.6rem;
    background: rgba(252, 245, 234, 1);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(228, 152, 41, 1);
    font-size: 0.32rem;
  }
  .timeset {
    font-size: 0.28rem;
    color: rgba(39, 41, 55, 1);
    margin: 0 0.2rem;
  }
}
.legend {
  text-align: center;
  span {
    font-size: 0.24rem;
    color: rgba(39, 41, 55, 1);
    position: relative;
    padding-left: 0.3rem;
    position: relative;

    &::after {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -0.1rem;
      content: "";
      display: block;
      width: 0.2rem;
      height: 0.2rem;
      background: linear-gradient(
        180deg,
        rgba(255, 187, 75, 1) 0%,
        rgba(228, 152, 41, 1) 100%
      );
      border-radius: 0.04rem;
    }
    &:nth-child(2) {
      margin-left: 0.1rem;
      &::after {
        background: linear-gradient(
          180deg,
          rgba(81, 175, 255, 1) 0%,
          rgba(23, 145, 255, 1) 100%
        );
      }
    }
  }
}
.van-popup,
.van-datetime-picker {
  width: 100%;
}
.notMemberDom {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #fff;
  top: 0;
}

.member {
  line-height: 1.5;
  padding: 1.3rem 0.3rem;
  font-size: 0.3rem;
  a {
    color: #e49829;
  }
}
</style>
